<!DOCTYPE html>
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org">-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据查询</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <!-- 这里使用了element ui框架 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入http-vue-loader -->
    <script src="https://unpkg.com/http-vue-loader"></script>
    <style type="text/css">
        data_center {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div id="app">

    <el-row>
        <el-col :span="12">
            <el-form
                    :model="queryParams"
                    size="small"
                    :inline="true"
            >
                <!--                <el-form-item prop="siteName">-->
                <!--                    <el-input-->
                <!--                            v-model="queryParams.siteName"-->
                <!--                            placeholder="站点名称"-->
                <!--                            clearable-->
                <!--                            style="width: 240px"-->
                <!--                            @keyup.enter.native="handleQuery"-->
                <!--                    />-->
                <!--                </el-form-item>-->
                <el-form-item prop="siteName">
<!--                    <el-date-picker-->
<!--                            v-model="queryParams.hourTime"-->
<!--                            type="datetime"-->
<!--                            value-format="yyyy-MM-dd HH:00:00"-->
<!--                            placeholder="选择日期时间">-->
<!--                    </el-date-picker>-->

                    <el-date-picker
                            v-model="hourTimes"
                            type="datetimerange"
                            range-separator="至"
                            value-format="yyyy-MM-dd HH:00:00"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="12">
            <el-upload
                    ref="upload"
                    action="#"
                    :multiple="false"
                    :limit="1"
                    :on-change="handleChange"
                    accept=".xlsx, .xls"
                    :file-list="fileList"
                    :auto-upload="false">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传xlsx/xls文件</div>
            </el-upload>
        </el-col>
    </el-row>
    <div style="margin: 20px 0 0 100px">
        <span style="font-size: 25px;font-weight: bold">{{dynamicLabel.x}}温江、郫都、双流、彭州、崇州区空气质量情况</span><br>
    </div>
    <div style="margin-top: 20px" >
        <el-table
                :data="tableData['临江区']"
                :span-method="objectSpanMethod"
                :header-cell-style="headerMethod"
                :cell-style="{'text-align':'center'}"
                style="width: 100%">
            <el-table-column
                    prop="countyName"
                    label="区县"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="siteName"
                    label="站点"
                    width="120">
            </el-table-column>
            <el-table-column :label="dynamicLabel.y">
                <el-table-column
                        prop="pm25"
                        label="PM2.5">
                </el-table-column>
                <el-table-column
                        prop="pm10"
                        label="PM10">
                </el-table-column>
                <el-table-column
                        prop="no2"
                        label="NO2">
                </el-table-column>
                <el-table-column
                        prop="co"
                        label="CO">
                </el-table-column>
                <el-table-column
                        prop="aqi"
                        label="AQI">
                </el-table-column>
                <el-table-column
                        prop="pp"
                        label="首污">
                </el-table-column>
            </el-table-column>
            <el-table-column :label="dynamicLabel.z">
                <el-table-column
                        prop="aqic"
                        label="AQI">
                </el-table-column>
                <el-table-column label="首污及浓度">
                    <el-table-column
                            prop="ppc">
                    </el-table-column>
                    <el-table-column
                            prop="ppcv">
                    </el-table-column>
                </el-table-column>
            </el-table-column>
            <el-table-column label="后续控制均值">
                <el-table-column
                        prop="pm25r"
                        label="PM2.5">
                </el-table-column>
                <el-table-column
                        prop="pm10r"
                        label="PM10">
                </el-table-column>
            </el-table-column>
        </el-table>
    </div>
    <div style="margin-top: 20px" >
        <el-table
                :data="tableData['郫都区']"
                :span-method="objectSpanMethod"
                :header-cell-style="headerMethod"
                :cell-style="{'text-align':'center'}"
                style="width: 100%">
            <el-table-column
                    prop="countyName"
                    label="区县"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="siteName"
                    label="站点"
                    width="120">
            </el-table-column>
            <el-table-column :label="dynamicLabel.y">
                <el-table-column
                        prop="pm25"
                        label="PM2.5">
                </el-table-column>
                <el-table-column
                        prop="pm10"
                        label="PM10">
                </el-table-column>
                <el-table-column
                        prop="no2"
                        label="NO2">
                </el-table-column>
                <el-table-column
                        prop="co"
                        label="CO">
                </el-table-column>
                <el-table-column
                        prop="aqi"
                        label="AQI">
                </el-table-column>
                <el-table-column
                        prop="pp"
                        label="首污">
                </el-table-column>
            </el-table-column>
            <el-table-column :label="dynamicLabel.z">
                <el-table-column
                        prop="aqic"
                        label="AQI">
                </el-table-column>
                <el-table-column label="首污及浓度">
                    <el-table-column
                            prop="ppc">
                    </el-table-column>
                    <el-table-column
                            prop="ppcv">
                    </el-table-column>
                </el-table-column>
            </el-table-column>
            <el-table-column label="后续控制均值">
                <el-table-column
                        prop="pm25r"
                        label="PM2.5">
                </el-table-column>
                <el-table-column
                        prop="pm10r"
                        label="PM10">
                </el-table-column>
            </el-table-column>
        </el-table>
    </div>
    <div style="margin-top: 20px" >
        <el-table
                :data="tableData['双流区']"
                :span-method="objectSpanMethod"
                :header-cell-style="headerMethod"
                :cell-style="{'text-align':'center'}"
                style="width: 100%">
            <el-table-column
                    prop="countyName"
                    label="区县"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="siteName"
                    label="站点"
                    width="120">
            </el-table-column>
            <el-table-column :label="dynamicLabel.y">
                <el-table-column
                        prop="pm25"
                        label="PM2.5">
                </el-table-column>
                <el-table-column
                        prop="pm10"
                        label="PM10">
                </el-table-column>
                <el-table-column
                        prop="no2"
                        label="NO2">
                </el-table-column>
                <el-table-column
                        prop="co"
                        label="CO">
                </el-table-column>
                <el-table-column
                        prop="aqi"
                        label="AQI">
                </el-table-column>
                <el-table-column
                        prop="pp"
                        label="首污">
                </el-table-column>
            </el-table-column>
            <el-table-column :label="dynamicLabel.z">
                <el-table-column
                        prop="aqic"
                        label="AQI">
                </el-table-column>
                <el-table-column label="首污及浓度">
                    <el-table-column
                            prop="ppc">
                    </el-table-column>
                    <el-table-column
                            prop="ppcv">
                    </el-table-column>
                </el-table-column>
            </el-table-column>
            <el-table-column label="后续控制均值">
                <el-table-column
                        prop="pm25r"
                        label="PM2.5">
                </el-table-column>
                <el-table-column
                        prop="pm10r"
                        label="PM10">
                </el-table-column>
            </el-table-column>
        </el-table>
    </div>
    <div style="margin-top: 20px" >
        <el-table
                :data="tableData['彭州市']"
                :span-method="objectSpanMethod"
                :header-cell-style="headerMethod"
                :cell-style="{'text-align':'center'}"
                style="width: 100%">
            <el-table-column
                    prop="countyName"
                    label="区县"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="siteName"
                    label="站点"
                    width="120">
            </el-table-column>
            <el-table-column :label="dynamicLabel.y">
                <el-table-column
                        prop="pm25"
                        label="PM2.5">
                </el-table-column>
                <el-table-column
                        prop="pm10"
                        label="PM10">
                </el-table-column>
                <el-table-column
                        prop="no2"
                        label="NO2">
                </el-table-column>
                <el-table-column
                        prop="co"
                        label="CO">
                </el-table-column>
                <el-table-column
                        prop="aqi"
                        label="AQI">
                </el-table-column>
                <el-table-column
                        prop="pp"
                        label="首污">
                </el-table-column>
            </el-table-column>
            <el-table-column :label="dynamicLabel.z">
                <el-table-column
                        prop="aqic"
                        label="AQI">
                </el-table-column>
                <el-table-column label="首污及浓度">
                    <el-table-column
                            prop="ppc">
                    </el-table-column>
                    <el-table-column
                            prop="ppcv">
                    </el-table-column>
                </el-table-column>
            </el-table-column>
            <el-table-column label="后续控制均值">
                <el-table-column
                        prop="pm25r"
                        label="PM2.5">
                </el-table-column>
                <el-table-column
                        prop="pm10r"
                        label="PM10">
                </el-table-column>
            </el-table-column>
        </el-table>
    </div>
    <div style="margin-top: 20px" >
        <el-table
                :data="tableData['崇州市']"
                :span-method="objectSpanMethod"
                :header-cell-style="headerMethod"
                :cell-style="{'text-align':'center'}"
                style="width: 100%">
            <el-table-column
                    prop="countyName"
                    label="区县"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="siteName"
                    label="站点"
                    width="120">
            </el-table-column>
            <el-table-column :label="dynamicLabel.y">
                <el-table-column
                        prop="pm25"
                        label="PM2.5">
                </el-table-column>
                <el-table-column
                        prop="pm10"
                        label="PM10">
                </el-table-column>
                <el-table-column
                        prop="no2"
                        label="NO2">
                </el-table-column>
                <el-table-column
                        prop="co"
                        label="CO">
                </el-table-column>
                <el-table-column
                        prop="aqi"
                        label="AQI">
                </el-table-column>
                <el-table-column
                        prop="pp"
                        label="首污">
                </el-table-column>
            </el-table-column>
            <el-table-column :label="dynamicLabel.z">
                <el-table-column
                        prop="aqic"
                        label="AQI">
                </el-table-column>
                <el-table-column label="首污及浓度">
                    <el-table-column
                            prop="ppc">
                    </el-table-column>
                    <el-table-column
                            prop="ppcv">
                    </el-table-column>
                </el-table-column>
            </el-table-column>
            <el-table-column label="后续控制均值">
                <el-table-column
                        prop="pm25r"
                        label="PM2.5">
                </el-table-column>
                <el-table-column
                        prop="pm10r"
                        label="PM10">
                </el-table-column>
            </el-table-column>
        </el-table>
    </div>
</div>
</body>

<script>
    Vue.use(httpVueLoader)
    new Vue({
        el: '#app',
        data() {
            return {
                queryParams: {
                    stTime: undefined,
                    endTime: undefined
                },
                hourTimes: [],
                currentMouth: undefined,
                currentDate: undefined,
                currentHour: undefined,
                dynamicLabel: {
                    x: undefined,
                    y: undefined,
                    z: undefined
                },
                tableData: [],
                fileList: []
            };
        },
        created() {

            // this.queryParams.stTime = this.getNowHourTime0()
            // this.queryParams.endTime = this.getNowHourTime()

            this.queryParams.stTime = '2022-11-30 01:00:00'
            this.queryParams.endTime = '2022-11-30 10:00:00'
            this.hourTimes =[new Date(this.queryParams.stTime),new Date(this.queryParams.endTime)]
            this.load()

            // this.loadTitle(this.queryParams.hourTime === undefined?new Date():new Date(this.queryParams.hourTime))
        },
        // components: {
        //     // 将组建加入组建库
        //     'table-component': 'url:/components/table-component.vue'
        // },
        methods: {
            //表单提交
            load() {
                this.loadTitle()
                this.query(this.queryParams).then(res => {
                    if (res.status == 200) {
                        if(res.data.code == 200){
                            // this.tableData = res.data.data['临江区'];
                            this.tableData = res.data.data;
                            // console.log(this.tableData)
                        }else{
                            this.$message.error(res.data.message);
                            this.tableData = {}
                        }
                    } else {
                        this.$message.error("请求服务异常！");
                    }
                });
            },
            search(){
                if (this.hourTimes == null|| this.hourTimes == undefined){
                    this.$message.error("请选择日期！");
                }else {
                    if (this.hourTimes.length == 0){
                        this.$message.error("请选择日期！");
                    }else {
                        this.queryParams.stTime = this.hourTimes[0]
                        this.queryParams.endTime = this.hourTimes[1]
                        // this.queryParams.stTime = this.formatTime(this.hourTimes[0])
                        // this.queryParams.endTime = this.formatTime(this.hourTimes[1])
                        this.load()
                    }
                }
            },
            // loadTitle(data) {
            //     this.currentMouth = data.getMonth() + 1
            //     this.currentDate = data.getDate()
            //     this.currentHour = data.getHours()
            //     this.dynamicLabel.x = "01-"+this.currentHour+"时累计"
            //     this.dynamicLabel.y = this.currentHour+"时"
            // },
            loadTitle() {
                // let st = new Date(this.queryParams.stTime)
                // let end = new Date(this.queryParams.endTime)
                // console.log(st.toLocaleString())
                if (this.queryParams.stTime.substring(0,10) === this.queryParams.endTime.substring(0,10)){
                    let date = new Date(this.queryParams.endTime)
                    this.dynamicLabel.x = date.getMonth() + 1 + '月' + date.getDate() +'日（截至'+ date.getHours()+'时）'
                    this.dynamicLabel.y = "01-"+date.getHours()+"时累计"
                    this.dynamicLabel.z = date.getHours()+"时"
                }else {
                    let date0 = new Date(this.queryParams.stTime)
                    let date = new Date(this.queryParams.endTime)
                    this.dynamicLabel.x = date0.getMonth() + 1 + '月' + date0.getDate() +'日'+date0.getHours()+'时~' + (date.getMonth() + 1) + '月' + date.getDate() +'日' + date.getHours()+'时（累计）'
                    this.dynamicLabel.y = this.dynamicLabel.x
                    this.dynamicLabel.z = date.getHours()+"时"
                }

                // this.dynamicLabel.x = this.queryParams.stTime.substring(0,10)
                // this.dynamicLabel.y = this.currentHour+"时"
            },
            query(data) {
                return axios({
                    url: '/api.data/query',
                    method: 'get',
                    params: data,
                });
            },
            //通过onchanne触发方法获得文件列表
            handleChange(file, fileList) {
                this.fileList = fileList;
            },
            submitUpload() {
                let fd = new FormData();
                fd.append("name",this.name);
                if (this.fileList.length == 0){
                    this.$message.error("请选择文件！");
                }else {
                    this.fileList.forEach(item=>{
                        //文件信息中raw才是真的文件
                        fd.append("excelFile",item.raw);
                        //console.log(item.raw)
                    })
                    axios({
                        method: 'post',
                        url: '/api.data/upload',
                        headers: { "Content-Type": "multipart/form-data" },
                        timeout: 30000,
                        data: fd
                    }).then(res=>{
                        if (res.status == 200) {
                            if(res.data.code == 200){
                                this.$message({
                                    message: '上传成功!'+res.data.data,
                                    type: 'success'
                                });
                                this.fileUpList = []
                                this.load()
                            }else{
                                this.$message.error(res.data.message);
                            }
                        } else {
                            this.$message.error("请求服务异常！");
                        }
                    })
                }
            },
            // 获取当前日期时间
            getNowHourTime(){
                var myDate=new Date;
                var year=myDate.getFullYear(); //获取当前年
                var mon=myDate.getMonth()+1<10?"0"+(myDate.getMonth()+1):myDate.getMonth()+1; //获取当前月
                var date=myDate.getDate()<10?"0"+myDate.getDate():myDate.getDate(); //获取当前日
                var hour=myDate.getHours()<10?"0"+myDate.getHours():myDate.getHours();//获取当前时
                var minute=myDate.getMinutes()<10?"0"+myDate.getMinutes():myDate.getMinutes();//获取当前分
                return year+"-"+mon+"-"+date+" "+hour+":"+"00:00";
            },
            getNowHourTime0(){
                var myDate=new Date;
                var year=myDate.getFullYear(); //获取当前年
                var mon=myDate.getMonth()+1<10?"0"+(myDate.getMonth()+1):myDate.getMonth()+1; //获取当前月
                var date=myDate.getDate()<10?"0"+myDate.getDate():myDate.getDate(); //获取当前日
                var hour=myDate.getHours()<10?"0"+myDate.getHours():myDate.getHours();//获取当前时
                var minute=myDate.getMinutes()<10?"0"+myDate.getMinutes():myDate.getMinutes();//获取当前分
                return year+"-"+mon+"-"+date+" "+"00:00:00";
            },
            formatTime(myDate){
                var year=myDate.getFullYear(); //获取当前年
                var mon=myDate.getMonth()+1<10?"0"+(myDate.getMonth()+1):myDate.getMonth()+1; //获取当前月
                var date=myDate.getDate()<10?"0"+myDate.getDate():myDate.getDate(); //获取当前日
                var hour=myDate.getHours()<10?"0"+myDate.getHours():myDate.getHours();//获取当前时
                var minute=myDate.getMinutes()<10?"0"+myDate.getMinutes():myDate.getMinutes();//获取当前分
                return year+"-"+mon+"-"+date+" "+hour+":"+"00:00";
            },
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 0) {
                    if (rowIndex === 0) {
                        return {
                            rowspan: 10,
                            colspan: 1
                        };
                    } else {
                        return {
                            rowspan: 0,
                            colspan: 1
                        };
                    }
                }
            },
            headerMethod({ row, column, rowIndex, columnIndex }) {
                const comStyle = { background: '#b1defd', color: '#606266', fontWeight: '800', textAlign: 'center' };
                // 1.1 让第0行的第0列跨2行
                if (rowIndex === 1 && columnIndex === 7) {
                    this.$nextTick(() => {
                        document
                            .getElementsByClassName(column.id)[0]
                            .setAttribute("rowSpan", 2);
                        return comStyle;
                    });
                }
                // 1.2 被覆盖的进行隐藏
                if (rowIndex === 2 && (columnIndex == 7 || columnIndex == 8)) {
                    return {
                        display: "none",
                        ...comStyle,
                    };
                }
                return comStyle;
            },
            // mergeCol(id, rowIndex) { // 合并单元格
            //     // id：属性名
            //     // rowIndex：行索引值
            //     var idName = this.tableData[rowIndex][id] // 获取当前单元格的值
            //     if (rowIndex > 0) { // 判断是不是第一行
            //         // eslint-disable-next-line eqeqeq
            //         if (this.tableData[rowIndex][id] != this.tableData[rowIndex - 1][id]) { // 先判断当前单元格的值是不是和上一行的值相等
            //             var i = rowIndex; var num = 0 // 定义一个变量i，用于记录行索引值并进行循环，num用于计数
            //             while (i < this.tableData.length) { // 当索引值小于table的数组长度时，循环执行
            //                 if (this.tableData[i][id] === idName) { // 判断循环的单元格的值是不是和当前行的值相等
            //                     i++ // 如果相等，则索引值加1
            //                     num++ // 合并的num计数加1
            //                 } else {
            //                     i = this.tableData.length // 如果不相等，将索引值设置为table的数组长度，跳出循环
            //                 }
            //             }
            //             return {
            //                 rowspan: num, // 最终将合并的行数返回
            //                 colspan: 1
            //             }
            //         } else {
            //             return {
            //                 rowspan: 0, // 如果相等，则将rowspan设置为0
            //                 colspan: 1
            //             }
            //         }
            //     } else { // 如果是第一行，则直接返回
            //         let i = rowIndex; let num = 0
            //         while (i < this.tableData.length) { // 当索引值小于table的数组长度时，循环执行
            //             if (this.tableData[i][id] === idName) {
            //                 i++
            //                 num++
            //             } else {
            //                 i = this.tableData.length
            //             }
            //         }
            //         return {
            //             rowspan: num,
            //             colspan: 1
            //         }
            //     }
            // },
        }
    })
</script>
</html>